<script setup lang="tsx">
import useIcons from "@/hooks/useIcons";
import GithubIcon from '~icons/mdi/github';
import accessPoint from '~icons/mdi/access-point?raw&width=4em&height=4em';

//一个动态菜单
const iconComponent = useIcons('icon-person', 'svg');

//模拟后端动态菜单
const menuData = [
  {
    label: '且听风吟',
    icon: 'icon-pailietubiao-32'
  },
  {
    label: '寻羊冒险记',
    icon: 'icon-erweima'
  }
];

//临时使用jsx语法写一个菜单列表树
const nodes: any = [];
menuData.forEach(data => {
  const icon = useIcons(data.icon);
  const node = (
    <span>
      {icon} {data.label}
    </span>
  );
  nodes.push(node);
});
</script>
<template>
  <div style="font-size: 1.2em" class="p-10">
    本地静态化iconify:
    <icons-svg-lang class="text-red-500" />
    <icons-svg-github class="text-red-500" />
    <icons-mdi-github class="text-red-500" />
    <GithubIcon class="text-red-500" />

    <icons-svg-park-abnormal style="color:green" />

    <span class="text-red-500">
      <icons-svg-lang />
      <icons-svg-github />
      <icons-mdi-github />
      <GithubIcon />
    </span>

    <hr />
    线上静态化iconify:
    <Icons-svg:mdiGithub />
    <Icons-svg:mdi-access-point />
    <span v-html="accessPoint" />
    <icons-svg:MaterialSymbols16mpOutlineRounded />
    <icons-svg:ri-arrow-go-forward-fill />
    <Icons-svg-solar-alarm-remove-linear />

    <hr />
    iconfont 阿里Symbol格式svg图标:
    <icons-font name="icon-pailietubiao-32" type="svg" class="text-red-500" />
    <icons-font name="icon-erweima" type="svg" class="text-red-500" />
    <icons-font name="icon-person" type="svg" />

    <hr />
    iconfont 阿里font-class格式font图标:
    <icons-font name="icon-pailietubiao-32" class="text-red-500" />
    <icons-font name="icon-erweima" class="text-red-500" />
    <icons-font name="icon-person" />

    <hr />
    iconfont 阿里font图标重新着色效果:
    <span style="font-size:38px;color:red">
      <icons-font name="icon-person" type="font" />
      <icons-font name="icon-gengduogongneng" type="font" />
    </span>

    <hr />
    iconfont 阿里svg图标重新着色效果:
    <span style="font-size:38px;color:red">
      <icons-font name="icon-person" type="svg" />
      <icons-font name="icon-gengduogongneng" type="svg" />
    </span>

    <hr class="mt-4 mb-2" />
    组件化阿里图标示例:
    <component :is="iconComponent" />

    <hr class="mt-4 mb-2" />
    动态组件化阿里图标示例:
    <ul style="font-size: 16px; color: blue">
      <li v-for="node in nodes">
        <component :is="node" />
      </li>
    </ul>
  </div>
</template>

<style scoped>
hr {
  border: 1px solid #eee;
  border-top: 0;
}
</style>